  <!DOCTYPE html>
<html class="x-admin-sm">

  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
                <a><cite>模板管理</cite></a>
                <a href="">合同模板</a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" placeholder="合同ID" name="modeId" id="modeId" class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" placeholder="项目名称" name="modeName" id="modeName" class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-header">
                            <button class="layui-btn" onclick="addTemplate()">
                                <i class="layui-icon"></i>添加</button></div>
                    <div class="layui-card-body ">
                            <table id="demo" class="layui-table layui-form" lay-filter="demo"></table></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function addTemplate(){
            var permission = sessionStorage.getItem("permission");
                if(permission == '3' || permission =='2')
                    xadmin.open('添加合同','./template-add.html',800,600)
                else alert("权限不足")
        }
    </script>
    <script type="text/html" id="show">
              <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="show_details" href="javascript:;">详情</a>
              <a class="layui-btn layui-btn-xs" id="" lay-event="edit" href="javascript:;">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" href="javascript:;">删除</a>
    </script>
    <script>
        layui.use(['table','form'], function(){
            var table = layui.table;
            table.render({
              elem: '#demo'
              ,id: "list"
                ,dateType: "json"
                ,contentType: "application/json"
              ,method: 'post'
              ,url: '/template/list'
              ,cols: [[ //标题栏
                {field: 'modeId', title: '模板ID'}
                ,{field: 'modeName', title: '模板名称'}
                ,{fixed: 'right', title:'操作', toolbar: '#show'}
              ]]
              ,parseData: function(res){ //res 即为原始返回的数据
                console.log(res);
                return {
                   "code": 0,
                    "data": res.data.templateList,
                   "count": res.dataSize, //解析数据长度
                };
              }
              ,skin: 'row' //表格风格
              ,even: true
              ,page: true
              ,limit: 5
              ,limits: [5,10,20]
              ,done : function(res, curr, count){
                  table_data=res.data;
                  layer.closeAll('loading');
               }
            });

            //监听行工具事件
            table.on('tool(demo)', function(obj) {
                var data = obj.data;
                //console.log(obj.data);
                var permission = sessionStorage.getItem("permission");
                if (obj.event === 'show_details') {
                    xadmin.open('详情', './template-show.html?modeId=' + obj.data.modeId, 800, 800);
                }
                if (obj.event === 'edit') {
                    if (permission == '3' || permission == '2')
                        xadmin.open('编辑', './template-edit.html?modeId=' + obj.data.modeId, 800, 800);
                    else alert("权限不足")
                }
                if (obj.event === 'del') {
                    if (permission == '3' || permission == '2') {
                        layer.confirm('真的删除么?', function (index) {
                            $.ajax({
                                url: "/template/deleteById",
                                data: {
                                    'modeId': obj.data.modeId
                                },
                                success: function (res) {
                                    if (res.msg == "success") {
                                        layer.msg("删除成功");
                                    } else {
                                        layer.msg('删除失败');
                                    }
                                    table.reload('list', {
                                        page: {curr: 1}
                                    });
                                }
                            })
                            layer.close(index);

                        });
                    } else {
                        layer.msg("权限不足");
                    }
                }
                ;
            });
                var form = layui.form;
                form.on('submit(search)', function (data) {
                    layer.load();
                    table.reload('list', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            'modeId': data.field.modeId.trim() != "" ? data.field.modeId.trim() : null,
                            'modeName': data.field.modeName.trim() != "" ? data.field.modeName.trim() : null,
                        }
                    });
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
            });
    </script>
  </body>
</html>